<template>
	<div>
		<div class="tip">绑定机具</div>
		<div class="bind-box">
			<div class="item">
				<span class="span">机具SN号</span>
				<input class="input" placeholder="请输入机具SN号" v-model="form.serialno" type="span" />
				<image class="icon" @click="scanCode" :src="require('@/common/images/sanCode.png')" mode=""></image>
			</div>
			<div class="next" @click="submit">绑定</div>
		</div>
		<div class="tip">机具列表</div>
		<div class="t-list">
			<div class="item" v-for="(item, index) in list" :key="index">
				<text>
					sn:{{ item.serialno }}
					<text class="brand">{{ item.brandName }}</text>
				</text>
				<text>{{ item.bindStatus | bindStatus }}</text>
			</div>
		</div>
	</div>
</template>

<script>
import { termBind, termBindList } from '_a/terminal';
export default {
	data() {
		return {
			form: {
				serialno: ''
			},
			list: [],
			navBarOptions: {
				backPrevPage: true
			}
		};
	},
	computed: {},
	onLoad() {
		this.getList();
	},
	methods: {
		getList() {
			termBindList().then(res => {
				if (res.code == 200) {
					this.list = res.data;
				}
			});
		},
		scanCode() {
			let _this = this;
			// this.$tip.loading('识别中....')
			// #ifdef H5
			this.$tip.toast('暂不支持!');
			// #endif
			// #ifndef H5
			uni.scanCode({
				success(res) {
					_this.$tip.loaded();
					_this.$tip.toast('识别成功!');
					_this.form.serialno = res.result;
				},
				fail() {
					_this.$tip.loaded();
				}
			});
			// #endif
		},
		confrimFun(callback) {
			this.$tip
				.modal({
					content: `确定绑定${this.form.serialno}`
				})
				.then(res => {
					callback();
				});
		},
		async submit() {
			if (!this.form.serialno) {
				return this.$tip.toast('请输入机具SN号!');
			}
			this.confrimFun(async () => {
				this.$tip.loading();
				let result = await termBind(this.form);
				if (result.code == 200) {
					this.$tip.loaded();
					this.$tip
						.modal({
							content: '绑定成功!',
							showCancel: false
						})
						.then(res => {
							this.form = {
								serialno: ''
							};
							this.getList();
						});
				} else {
					this.$tip.loaded();
				}
			});
		}
	}
};
</script>

<style lang="scss">
.has {
	padding: R(20px) 0;
}

.tip {
	padding: R(20px);
	font-size: R(28);
	color: #5c5a5a;
}

.bind-box {
	background: #fff;
	padding: R(30px) R(20px);

	.item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: R(25px) R(20px);
		font-size: R(28px);
		font-weight: 400;
		color: #262626;
		border-bottom: 1px solid #eee;

		.input {
			flex: 1;
			text-align: right;
			margin-left: auto;
			font-size: R(28px);
			color: #7d7d7d;
		}

		.icon {
			width: R(40px);
			height: R(40px);
			margin-left: R(20px);
		}
	}
}

.next {
	margin: R(40) auto 0;
	width: R(581);
	height: R(80px);
	line-height: R(80);
	text-align: center;
	background: #fdb747;
	border: 1px solid #fdb747;
	border-radius: R(10px);
	font-size: R(30px);
	font-weight: 400;
	color: #ffffff;
}

.t-list {
	background: #fff;

	.item {
		display: flex;
		justify-content: space-between;
		padding: R(22px) R(30px);
		border-bottom: 1px solid #eee;

		// text:nth-child(2) {
		// 	font-size: R(26px);
		// 	font-weight: bold;
		// }

		text:nth-child(1) {
			font-size: R(28px);
			font-weight: bold;

			.brand {
				margin-left: R(10);
				display: inline-block;
				font-size: R(20);
				border: 1px solid $themeColor;
				padding: R(5);
				color: $themeColor;
				border-radius: R(10);
			}
		}

		text:nth-child(2) {
			font-size: R(28px);
			color: $themeColor;
		}
	}
}
</style>
